<template>
  <div class="orderlist-container">
    <!-- 商品列表标题 -->
    <fieldset>
	<legend>商品列表</legend>
</fieldset>

<!-- 商品列表 -->
    <div class="order-list-container">

      <el-auto-resizer>
        <template #default="{ height }">
          <el-scrollbar max-height="700px">
            <div class="message-list-box">
              <ul>
                <li v-for="(item, index) in goodList" :key="index">
                  <!-- 单个商品组件 -->
                  <ConsultItem :id="item.id" :goodsCover="item.goodsCover" :goodsName="item.goodsName" :price="item.price" />
                </li>
              </ul>
            </div>
          </el-scrollbar>
        </template>
      </el-auto-resizer>





    </div>
  </div>
</template>
<script setup>
import { reactive, ref } from "vue";
import ConsultItem from "./ConsultItem.vue";
/**
 * 商品数组
 */
const goodList = reactive([
  {
    id:1,
    goodsCover:"https://img13.360buyimg.com/n1/jfs/t1/138296/24/38090/145185/64c38c3aF568cba9c/32db385165ef0927.jpg",
    goodsName:"舒肤佳香皂 3块皂(纯白+柠檬+芦荟)肥皂 洗去细菌99% 新旧包装随机",
    price:33.3
  },
  {
    id:2,
    goodsCover:"https://img13.360buyimg.com/n1/jfs/t1/138296/24/38090/145185/64c38c3aF568cba9c/32db385165ef0927.jpg",
    goodsName:"舒肤佳香皂 3块皂(纯白+柠檬+芦荟)肥皂 洗去细菌99% 新旧包装随机",
    price:33.3
  },
  {
    id:3,
    goodsCover:"https://img13.360buyimg.com/n1/jfs/t1/138296/24/38090/145185/64c38c3aF568cba9c/32db385165ef0927.jpg",
    goodsName:"舒肤佳香皂 3块皂(纯白+柠檬+芦荟)肥皂 洗去细菌99% 新旧包装随机",
    price:33.3
  },
  {
    id:4,
    goodsCover:"https://img13.360buyimg.com/n1/jfs/t1/138296/24/38090/145185/64c38c3aF568cba9c/32db385165ef0927.jpg",
    goodsName:"舒肤佳香皂 3块皂(纯白+柠檬+芦荟)肥皂 洗去细菌99% 新旧包装随机",
    price:33.3
  },
  {
    id:1,
    goodsCover:"https://img13.360buyimg.com/n1/jfs/t1/138296/24/38090/145185/64c38c3aF568cba9c/32db385165ef0927.jpg",
    goodsName:"舒肤佳香皂 3块皂(纯白+柠檬+芦荟)肥皂 洗去细菌99% 新旧包装随机",
    price:33.3
  },
  {
    id:2,
    goodsCover:"https://img13.360buyimg.com/n1/jfs/t1/138296/24/38090/145185/64c38c3aF568cba9c/32db385165ef0927.jpg",
    goodsName:"舒肤佳香皂 3块皂(纯白+柠檬+芦荟)肥皂 洗去细菌99% 新旧包装随机",
    price:33.3
  },
  {
    id:3,
    goodsCover:"https://img13.360buyimg.com/n1/jfs/t1/138296/24/38090/145185/64c38c3aF568cba9c/32db385165ef0927.jpg",
    goodsName:"舒肤佳香皂 3块皂(纯白+柠檬+芦荟)肥皂 洗去细菌99% 新旧包装随机",
    price:33.3
  },
  {
    id:4,
    goodsCover:"https://img13.360buyimg.com/n1/jfs/t1/138296/24/38090/145185/64c38c3aF568cba9c/32db385165ef0927.jpg",
    goodsName:"舒肤佳香皂 3块皂(纯白+柠檬+芦荟)肥皂 洗去细菌99% 新旧包装随机",
    price:33.3
  },
])
</script>
<style scoped>
fieldset {
  border: 0;
  border-top: 1px solid #ddd;
  text-align: center;

  legend {
    padding: 0 5%;
  }
}


ul,
li {
  list-style: none;
  padding: 0;
}

.order-list-container {
  margin-top: 8px;
  /* background-color: #E7CED2; */
  height: 100%;

}

.orderlist-container {
  height: 100%;
}
</style>
